<template>
  <div class="v-attr-group-table">
    <div
      class="_attribute-header g-flex-0 g-jc-sb"
      :class="[$global.isIpcWindow ? '_BackGroundWhite' : '__BackGroundGrey']"
    >
      <div class="g-ai-c g-one-line g-pd-l-8">
        <span
          class="_sort"
          :class="{ '_sort-active': data.sortByNameActive }"
          @click="attributeTabsModel.toggleSortByNameActive()"
        >
          <img src="statics/icons/app/textsort.svg" />
        </span>
      </div>
    </div>
    <div
      v-if="(groupPan?.groupTableInfo?.rows.length || -1) > 0"
      style="height: 100%"
    >
      <div
        class="_attribute-content g-fd-c"
        style="overflow-y: auto"
      >
        <el-table
          ref="tableRef"
          :data="groupPan.groupTableInfo!.rows"
          :style="{ width: 100 + '%', overflow: 'auto' }"
          height="100%"
          row-key="instanceId"
          empty-text="暂无数据"
          element-loading-text="加载中..."
          border
          :header-cell-class-name="headerCellClassName"
          :cell-class-name="cellClassName"
          @cell-click="cellClick"
          @cell-dblclick="cellDblclick"
        >
          <el-table-column
            v-for="column in groupPan.columns"
            :key="column.prop"
            :label="column.label"
            :align="column.align"
            :minWidth="column.minWidth"
            :height="column.height"
            :prop="column.prop"
          >
            <template #default="{ row }">
              <span v-if="column.label == 'properties'"></span>
              <span v-else>
                <component
                  :is="propertyManager.getEditorByPropertyRow(row.propertyKeyMap.get(column.prop))"
                  v-focus
                  class="property-content"
                  :row="row.propertyKeyMap.get(column.prop)"
                  :selected="true"
                  @click.stop
                />
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else><NoData></NoData></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { modelService } from "@/modules/model/service";
import { propertyManager } from "@/modules/model/comps/station/sider/attribute/PropertyManager";
import NoData from "./noData.vue";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  isWindowBackGround?: boolean; // 控制背景颜色
  groupId?: string;
  modelId?: string;
}>();
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const groupPan = computed(() => attributeTabsModel.value.groupPaneModel);
const data = computed(() => {
  return attributeTabsModel.value.data;
});

const dblSeledtedCellId = ref<Set<string>>(new Set());

const tableData = ref<any[]>([]);

const headerCellClassName = () => {
  return "table_header";
};

const cellDblclick = async (row: any, column: any, cell: any, event: Event) => {
  if (row.disabled) return;
  const disabled = await modelService.isModelDisabled(row.key, app.activeProject!.id);
  if (disabled) return;
  const target = event.target as Element;
  if (target.classList.contains("el-table__expand-icon") || row.readonly) return;
  dblSeledtedCellId.value.add(row.key + column.property);
};

const cellClick = async (row: any, column: any, cell: any, event: MouseEvent) => {
  event.stopPropagation();
};
const cellClassName = () => {
  return "";
};
defineExpose({
  tableData
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attr-group-table {
  display: flex;
  padding: 0 0px;
  flex-direction: column;
  height: 100%;
  background: $frame-siderbar-bg-color;
  overflow: hidden;
  ._BackGroundWhite {
    background-color: white;
  }
  .__BackGroundGrey {
    background: $frame-siderbar-bg-color;
  }
  ._attribute-header {
    height: 28px;
    flex: 0;
    padding-left: 4px;
    padding-right: 8px;

    .divider {
      width: 1px;
      height: 16px;
      background: #b1cee2;
      margin: 0 8px;
    }
    ._sort {
      font-size: 0;
      display: inline-block;
      cursor: pointer;
      width: 24px;
      height: 24px;
      padding: 4px 0 0 4px;

      img {
        width: 14px;
        height: 14px;
      }
      &:hover {
        border: 1px solid #d0d0d0;
        background: $item-active-bg-color;
      }
      &._sort-active {
        background: $item-active-bg-color;
        border: 1px solid #e0e0e0;
      }
    }
  }
  ._attribute-content {
    padding-left: 4px;
    padding-right: 4px;

    height: 100%;
    flex: 1;
    // margin-left: 8px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 24px;
    }
  }
  .el-input__wrapper {
    box-shadow: none;
  }
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }
  .is-leaf.table_header {
    background: $titlebar-bg-color;
  }

  .el-table__body {
    .hover-row .el-table__cell {
      background-color: #fff;
    }
    .el-table__row {
      .cell {
        min-height: 24px;
      }
    }
    tr:last-of-type {
      .el-table__cell {
        border-bottom-color: #999;
      }
    }

    .el-table__cell {
      border-color: #d4d4d4;
      transition: none;
      padding: 0;
      &.el-table-fixed-column--left {
        border-left: 0;
      }
      &.disabled {
        background: #e6e6e6;
      }
      &:hover,
      &.active {
        background-color: $nth-of-type-bg-color;
      }
      &.indexCell {
        background-color: #e6e6e6;
        color: var(--el-table-text-color);
        z-index: 4;
        border-right-color: #999 !important;
        position: relative;
        border-bottom: 0;
        &::before {
          position: absolute;
          content: "";
          height: 1px;
          background-image: linear-gradient(to right, #d2d2d2 0%, #adacac 58%, #999 100%);
          left: 0;
          right: 0;
          bottom: 0;
          width: unset;
          top: unset;
        }
        .cell {
          display: block;
        }
        &.active {
          background: #d2d2d2;
          position: relative;
          &::after {
            position: absolute;
            content: "";
            width: 2px;
            background-color: $theme-color;
            right: -1px;
            top: -1px;
            bottom: -1px;
          }
        }
      }
      &.lastColumnCell {
        border-right-color: #999 !important;
      }
      &.selected {
        border-color: $theme-color;
        background-color: #fff;
        color: var(--el-table-text-color);
        position: relative;
        z-index: 2;
        &::after {
          content: "";
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          pointer-events: none;
          border: 2px solid $theme-color;
        }
        &::before {
          position: absolute;
          content: "";
          width: 6px;
          height: 6px;
          border: 1px solid #fff;
          background-color: $theme-color;
          right: -4px;
          bottom: -4px;
          z-index: 3;
        }
      }
    }
  }
}
</style>
